<template>
	<view :class="themeStyle">
		<mescroll-uni @getData="getData" ref="mescroll">
			<block slot="list">
				<view class="money-box">
					<view class="money-item">
						<text>余额</text>
						<text>{{memberInfo.balance}}</text>
					</view>
					<view class="money-item">
						<text>红包</text>
						<text>{{memberInfo.balance_money}}</text>
					</view>
				</view>
				<!-- 转出列表 -->
				
				
				<!-- <view class="balance_to_balance_money">
					<input class="uni-input" type="number" v-model="balance_money_to_balance_data" placeholder="请输入转出金额(元)" />
					<button type="default" class="sue-btn" @inputPwd="Getpassword" @click="submit()">转出</button>
				</view> -->
				
				<view class="balance_to_balance_money recharge-type-common">
					<view class="edit-wrap">
						<view class="edit-item">
							<text class="tit">转出</text>
							<!-- <input class="uni-input" type="number" v-model="balance_money_to_balance_data" placeholder="请输入转出金额(元)" /> -->
							<input class="uni-input" type="number" placeholder="请输入转出金额(元)" maxlength="30" name="name" value="" v-model="balance_money_to_balance_data" />
						</view>
					</view>
					<view class="buttom-box">
						<!-- <button type="default" class="sue-btn" @inputPwd="Getpassword" @click="submit()">转出</button> -->
						<button type="default" class="sue-btn" @inputPwd="Getpassword" @click="submit()">转出</button>
						<!-- <button type="primary" class="add" @click="commonRechargeSubmit">保存</button> -->
					</view>
					<!-- <loading-cover ref="loadingCover"></loading-cover> -->
				</view>
				
			</block>
		</mescroll-uni>
		<jpKeyboard ref="jpKeyboard1" keyType="two" @inputPwd="Getpassword" @backspace="del_password"></jpKeyboard>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import jpKeyboard from '@/components/jp-keyboard/jp-keyboard.vue';
	export default {
		components: {
			jpKeyboard
		},
		data() {
			return {
				memberInfo: {
					balance: 0,
					locked_balance: 0,
					balance_money: 0,
					point: 0,
					red_point: 0,
					junzheng_ticket: 0

				},
				password: '',
				pay_class: 1,
				transfer_type: 'balance_money_to_balance',
				balance: 0,
				balance_money: 0,
				balance_money_to_balance_data: '',
				dataList: [],
				statusList: [{
						name: '全部',
						id: '0'
					},
					{
						name: '收入',
						id: '1'
					},
					{
						name: '支出',
						id: '2'
					}
				],
				scrollInto: '',
				orderStatus: '0',
			};
		},

		onLoad(option) {
			if (option.status) this.orderStatus = option.status;
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/otherpages/member/balance/balance');
			}
			this.getMemberInfo()
		},
		computed: {
			themeStyle() {
				return 'theme-' + this.$store.state.index.themeStyle
			}
		},
		methods: {
			ontabtap(e) {
				let index = e.currentTarget.dataset.current;
				this.orderStatus = this.statusList[index].id;
				this.$refs.mescroll.refresh();
			},

			// 获取会员基础信息
			async getMemberInfo() {
				let res = await this.$api.sendRequest({
					url: '/api/member/info',
					async: false
				});
				if (res.code >= 0 && res.data) {
					this.token = uni.getStorageSync('token');
					this.memberInfo = res.data;
					// balance:res.data.balance
					uni.setStorageSync('userInfo', this.memberInfo);
				} else {
					this.token = '';
					this.initInfo();
					uni.removeStorageSync('token');
				}
				uni.stopPullDownRefresh();
			},

			check(e) {
				this.pay_class = e
				this.calculate()
			},
			// 计算
			calculate() {
				if (this.exchange_num == '') {
					this.need_money = 0
					this.need_jifen = 0
				} else if (this.pay_class == 1) {
					let need1 = parseFloat(this.exchange_num) * parseFloat(this.exchange_rate)
					this.need_money = need1.toFixed(2)
					let need2 = parseFloat(this.exchange_num) * (1 - parseFloat(this.exchange_rate))
					this.need_jifen = need2.toFixed(2)
				} else if (this.pay_class == 2) {
					this.need_money = this.exchange_num
					this.need_jifen = 0
				}
			},

			submit() {
				// 判断
				if (this.balance_money_to_balance_data == 0) {
					uni.showToast({
						title: '请输入金额~',
						icon: 'none'
					})
					return;
				}
				if (Number(this.balance_money_to_balance_data) > Number(this.memberInfo.balance_money)) {
					uni.showToast({
						title: '红包账户不足~',
						icon: 'none'
					})
					return;
				}
				 
				this.$refs.jpKeyboard1.toOpen()
			},
			// 输入密码完成
			Getpassword(e) {
				console.log(e)
				this.password = e
				this.sue_submit()
			},
			// del_password() {},

			// 提交
			sue_submit() {
				// let exchange_type = this.exchange_type[this.pay_class];
				this.$api.sendRequest({
					url: '/api/memberaccount/transfer',
					data: {
						transfer_type: this.transfer_type,
						account_data: this.balance_money_to_balance_data,
						pay_password: this.password
					},
					success: res => {
						if (res.code == 0) {
							console.log(res)
							uni.showToast({
								title: '转账成功~',
							})
							setTimeout(() => {
								this.$util.goBack();
							}, 500)
						} else {
							if (res.error_code == 'PAY_PASSWORD_NOT_SET') {
								uni.showModal({
									title: '支付密码未设置',
									content: '是否要去设置',
									success: (res) => {
										if (res.confirm) {
											this.$util.redirectTo('/otherpages/member/pay_password/pay_password', {
												back: '/otherpages/member/balance_money_to/to_balance/to_balance'
											});
										}
									}
								}); 
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						}
					},
					fail: (err) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				});
			},
			
			getData(mescroll) {
				this.$api.sendRequest({
					url: '/api/memberaccount/page',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						account_type: 'balance,locked_balance'
					},
					success: res => {
						if (res.code == -1 && res.error_code == 'TOKEN_ERROR') {
							this.$util.showToast({
								'title': '登录失败'
							});
							let pageRouter = getCurrentPages();
							let data = pageRouter[pageRouter.length - 1].options;
							let back = pageRouter[pageRouter.length - 1].route;
							data.back = back;
							setTimeout(() => {
								this.$util.redirectTo('/pages/login/login/login', data);
							}, 1500)
							return;
						}
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	// [data-theme] {
		.recharge-type-common {
			.edit-wrap {
				margin: 20rpx;
				background: #fff;
				border-radius: $ns-border-radius;
				overflow: hidden;
			}
		
			.edit-item {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				height: 100rpx;
				background-color: #fff;
		
				.tit {
					width: 120rpx;
					font-size: $uni-font-size-lg - 2rpx;
				}
		
				.select-address {
					display: inline-block;
					font-size: $ns-font-size-base;
					margin-left: 10rpx;
		
					&.empty {
						color: #808080;
					}
				}
		
				input {
					flex: 1;
					font-size: $uni-font-size-lg - 2rpx;
					margin-left: 20rpx;
					padding: 0;
					margin-right: 20rpx;
				}
			}
		
			.edit-wrap>.edit-item+.edit-item {
				border-top: 2rpx solid #ebedf0;
			}
		
			.buttom-box {
				position: absolute;
				width: 100%;
				bottom: 0;
				// background-color: #FF335C !important;
		
				.add {
					margin-bottom: 60rpx !important;
				}
			}
		
		
		}
		
		
		

	.balance_to_balance_money input {
		height: 137px;
		width: 400rpx;
		margin: 20rpx auto;
		font-size: 40rpx;
	}

	.money-box {
		height: 125px;
		background-color: #FF335C;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.money-item {
			color: white;
			font-size: 35rpx;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			padding: 0 23rpx;
			padding-bottom: 20rpx;

			text:last-child {
				font-size: 42rpx;
			}
		}
	}

	.sue-btn {
		// background-image: linear-gradient(to right, #F63F3D, #ED018A);
		color: #fff !important;
		background-color: #FF335C !important;
		border-radius: 40rpx;
		margin: 0 23rpx;
		font-size: 32rpx;
		letter-spacing: 4rpx;
		margin-bottom: 30px !important;
	}



	.transfer-input {
		width: 200rpx;
		height: 150rpx;
		border: 1rpx solid red($color: #000000);
	}

	.transfer_money {
		height: 400rpx;
		border: 1rpx solid red($color: #000000);
	}

	.balances {
		background: #fff;

		.balances-item {
			display: flex;
			padding: 30rpx 30rpx;
			border-bottom: 1px solid $ns-border-color-gray;
			font-size: $ns-font-size-lg + 2rpx;

			.balance-img {
				padding-right: 20rpx;
				felx: 2;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-left: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.balance-head-wrap {
				flex: 5;

				.balance-head {
					display: flex;
					justify-content: space-between;
					line-height: 1;

					.balance-head-title {
						color: #000000;
						font-size: $ns-font-size-lg;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 460rpx;
					}

					.num {
						font-size: $ns-font-size-lg;
					}
				}

				.balance-time {
					// align-self: flex-end;
				}

				.balance-text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;
				}
			}
		}

	}

	.empty {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.iconfont {
			font-size: 50rpx;
			margin-bottom: $ns-margin;
		}
	}

	// }
</style>
